$(function () {

    let layer = layui.layer;
    let form = layui.form;
    // ********************************************************加载列表
    function list() {
        $.ajax({
            url: "/admin/links",
            success: function (res) {
                let str = ""
                $.each(res.data, function (index, item) {
                    // console.log(item, index);
                    imgsrc = "http://127.0.0.1:8888/uploads/" + item.linkicon
                    str += `<tr>
                <td>${item.id}</td>
                <td>
                  <div class="bg">
                    <img src="${imgsrc}">
                  </div>
                </td>
                <td>${item.linkname}</td>
                <td>${item.linkurl}</td>
                <td>${item.linkdesc}</td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs edit" _id=${item.id} _linkname=${item.linkname} _linkurl=${item.linkurl}  _linkdesc=${item.linkdesc} >
                编辑
              </button>
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" _id=${item.id}>
                删除
              </button>
                </td>
              </tr>`;
                })
                $("tbody").html(str)
            }
        })

    }

    list()
    // *********************************************************删除友情链接
    $("tbody").on("click", ".delete", function () {
        let id = $(this).attr("_id")

        layer.confirm('是否确定删除?', function (index) {
            //do something
            $.ajax({
                url: "/admin/links/" + id,
                type: "delete",
                success: function (res) {
                    layer.msg(res.message)
                    list()
                }
            })
            layer.close(index);
        });

    })

    // **********************************************************编辑友情链接
    let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url" >
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file"  id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;


    $("tbody").on("click", ".edit", function () {
        let id = $(this).attr("_id");


        $.ajax({
            url: "/admin/links/" + id,

            success: function (res) {


                let index = layer.open({
                    type: 1,
                    title: '友情链接修改',
                    content: edit_str,
                });
                form.val("editForm", res.data)

                $("#urlIcon").on("click", function () {
                    $("#linkFile").click()
                })
                let obj;
                $("#linkFile").on("change", function () {
                    obj = this.files[0]
                    let src = URL.createObjectURL(obj)
                    $("#preIcon").attr("src", src)
                })
                $("#edit-form").on("submit", function (e) {
                    e.preventDefault()
                    let fd = new FormData(this)
                    fd.append("linkicon", obj)
                    $.ajax({
                        url: "/admin/links/" + id,
                        type: "put",
                        data: fd,
                        success: function (res) {
                            layer.msg(res.message)
                            layer.close(index)
                            list()
                        },
                        processData: false,
                        //必须
                        contentType: false,
                    })

                })
            }

        })

    })
    // *********************************************************添加友情链接
    let add_str = `
  <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile"  style="display: none;">
          <img id="preIcon" src="" >
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`

    $("#add-link").on("click", function () {
        // let form1 = $(this)
        let index = layer.open({
            type: 1,
            title: '友情链接添加',
            content: add_str,
            area: ['500px', '350px'],
        });
        $("#urlIcon").on("click", function () {
            $("#linkFile").click();
        })
        $("#linkFile").on("change", function () {
            let obj = this.files[0]
            let src = URL.createObjectURL(obj)
            console.log(obj);
            $("#preIcon").attr("src", src)
        })
        $("#add-form").on("submit", function (e) {
            e.preventDefault()
            let data = new FormData(this)
            $.ajax({
                url: "/admin/links",
                type: "post",
                data: data,
                success: function (res) {
                    layer.msg(res.message)
                    layer.close(index)
                    list()
                },
                processData: false,
                //必须
                contentType: false,
            })

        })
    })
})